<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basepath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>24小时内已缴费车辆</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="<%=basepath%>css/index.css" rel="stylesheet" type="text/css">
    <link href="<%=basepath%>css/parking.css" rel="stylesheet" type="text/css">
    <script src="<%=basepath%>js/jquery-1.8.3.min.js"></script>
    <script src="<%=basepath%>js/layer/layer.js"></script>
    <script src="<%=basepath%>js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="viewport">
    <div class="header">
       <div class="header-1">
           <a href="javascrpt:void(0)" id="join" class="header-2">
              <span id="account" class="account">${empty user.realName ? '' : user.realName}</span>&nbsp;&nbsp;<span id="deptName" class="deptName">${user.departmentName}</span>
           </a>
           <a href="/wape-web/api/core/centerService?serviceCode=WJ9999&targetURL=yuexi&prefix=3g_mmzs&entrance=yes" class="back" id="back">返回</a>
           <span class="span-num">WOP24000</span>
       </div>
    </div>
    <form action="" method="post" id="queryFrm" name="queryFrm">
        <input type="hidden" name="selectedChargesIds" />
        <div class="content m-top">
            <div class="hr-1"></div>
            <div class="fix">
                <div class="fix-1">
                    <a href="/wape-web/api/core/centerService?serviceCode=MMZS120&queryType=1" class="fix-1-1">全部调度信息</a>
                    <a href="/wape-web/api/core/centerService?serviceCode=MMZS120&queryType=2" class="fix-1-1">缴费信息</a>
                    <a href="/wape-web/api/core/centerService?serviceCode=MMZS122&queryFlag=1" class="fix-1-1 li-active">24小时收费信息</a>
                    <a href="/wape-web/api/core/centerService?serviceCode=MMZS120&queryType=4" class="fix-1-1 margin-right">超时提醒</a>
                </div>
            </div>
            <div class="blank-m"></div>
            <div class="vehicle-2">
                <div class="vehicle-2-1">
                <span style="float:left;">
                   <select style="border:none;background-color: transparent;" id="query" name="query">
                       <c:if test="${queryHour == null or queryHour == '0'}">
                           <option value="0" selected="selected">-按时间查询-</option>
                       </c:if>
                       <c:if test="${queryHour != null and queryHour != '0'}">
                           <option value="0">-按时间查询-</option>
                       </c:if>
                       <c:if test="${queryHour != null and queryHour == '8'}">
                           <option value="8" selected="selected">8小时内</option>
                       </c:if>
                       <c:if test="${queryHour == null or queryHour != '8'}">
                           <option value="8">8小时内</option>
                       </c:if>
                       <c:if test="${queryHour != null and queryHour == '12'}">
                           <option value="12" selected="selected">12小时内</option>
                       </c:if>
                       <c:if test="${queryHour == null or queryHour != '12'}">
                           <option value="12">12小时内</option>
                       </c:if>
                       <c:if test="${queryHour != null and queryHour == '16'}">
                           <option value="16" selected="selected">16小时内</option>
                       </c:if>
                       <c:if test="${queryHour == null or queryHour != '16'}">
                           <option value="16">16小时内</option>
                       </c:if>
                       <c:if test="${queryHour != null and queryHour == '20'}">
                           <option value="20" selected="selected">20小时内</option>
                       </c:if>
                       <c:if test="${queryHour == null or queryHour != '20'}">
                           <option value="20">20小时内</option>
                       </c:if>
                   </select>
                </span>
                <span class="span-1" style="margin-left:5px;">
                    <c:if test="${queryFlag != null and queryFlag == '1'}">
                       <input type="checkbox" name="query1" class="input-v1" checked="checked" onclick="doQuery(1)">
                    </c:if>
                    <c:if test="${queryFlag == null or queryFlag != '1'}">
                       <input type="checkbox" name="query1" class="input-v1" onclick="doQuery(1)">
                    </c:if>
                    <span class="span-2">仅显示自己</span>
                </span>
                <c:set var="right" value=",2002,200201,200202,"></c:set>
                <c:if test="${(fn:indexOf(right, user.departmentId) != -1) and list ne null}">
                    <a href="javascript:void(0)" class="a3-1" id="_report">交班报告</a>
                </c:if>
                </div>
            </div>

            <c:forEach var="el" items="${list}">
                <c:set var="dt" value="${el.get('feeCount') }"></c:set>
                <c:if test="${dt.countCar != '0'}">
                    <div class="vehicle-3" id="time${dt.dateStr}">
                        <div class="vehicle-3-1">
                            <table>
                                <tr>
                                    <td style="float:left;">${dt.dateStr}</td>
                                    <td class="total_c">车次：<b>${dt.countCar}</b>台次</td>
                                    <td class="total_m">总金额：<b>${dt.countFee}</b>元</td>
                                    <td class="total_m" style="float:right;">勾选：<input type="checkbox" name="choose" class="input3-1" checked="checked" id="input3-1"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <c:forEach var="pt" items="${el.get('list')}">
                        <div class="vehicle-4 time${dt.dateStr }">
                            <a href="/wape-web/api/core/centerService?serviceCode=MMZS112&inRecordNum=${pt.inRecordNum }&storeId=${pt.storeId}&storeName=${pt.storeName}&sonStoreName=${pt.sonStoreName}&sonStoreId=${pt.sonStoreId}&payType=${pt.payType}&queryType=3" class="vehicle-4-1">
                                <table class="vehicle3-1">
                                    <tr>
                                        <td class="td-v1">${pt.plateNum}</td>
                                        <%-- <td class="td-v2">${pt.sonStoreName}</td>--%>
                                        <c:if test="${pt.costType == '10' }">
                                            <td class="td-v2">经营费</td>
                                        </c:if>
                                        <c:if test="${pt.costType == '20' }">
                                            <td class="td-v2">超时费</td>
                                        </c:if>
                                        <c:if test="${pt.costType == '30' or pt.costType == '40' }">
                                            <td class="td-v2">短租费</td>
                                        </c:if>
                                        <td class="td-v2">${pt.chargerName }</td>
                                        <td class="td-v3">${pt.payment}元</td>
                                        <td class="gray td-v4">${pt.chargesTime }</td>
                                        <td class="td-v5"><input type="checkbox" name="carStatistic" class="input3-1 ${pt.chargesId }" checked="checked"></td>
                                    </tr>
                                </table>
                            </a>
                        </div>
                    </c:forEach>
                    <div class="blank"></div>
                </c:if>
            </c:forEach>
            <div class="space"></div>
        </div>
    </form>
</div>
<script type="text/javascript">
    /*错误提示*/
    $(function(){
        var error = "${requestScope.returnMsg}";
        if(error != "" && error != "成功!"){
            layer.msg(error,{shadeClose:true,shade:0.1,time:2000});
        }
    });
    $(function(){
        /*Tab焦点*/
        $(".fix-1").animate({scrollLeft:$(".li-active").offset().left}, 0);
        /*勾选隐藏*/
        $(function(){
            $(".td-v5 input").click(function(){
                $(this).parents(".vehicle-4").fadeToggle(200);
            });
            $("#input3-1").click(function(){
                $(".vehicle-4").fadeToggle(200);
            });
        });

        $('input[name="choose"]').click(function(){
            var _tis = $(this);
            var _pDiv = _tis.parents('div.vehicle-3');

            var _check = _tis.attr('checked');

            var _divClass = _pDiv.attr('id');
            var _time = _divClass.substring(4);
            var _list = $('div.time' + _time).find('input[name="carStatistic"]');
            var _cB = $('div#time' + _time).find('td.total_c b');
            var _tB = $('div#time' + _time).find('td.total_m b');
            if(_check == 'checked') {
                _list.attr('checked', 'checked');
                var _c = _cB.html();
                var _t = _tB.html();
                var cc = parseInt(_c);
                var tt = parseInt(_t);
                $('div.time' + _time).each(function(i){
                    var _p = $(this).find('td.td-v3').html();
                    if(_p) {
                        if(_p.indexOf('.') > -1) {
                            _p = _p.substring(0, _p.indexOf('.'));
                        }
                        if(_p.indexOf('元') > -1) {
                            _p = _p.substring(0, _p.indexOf('元'));
                        }
                    }
                    var pp = parseInt(_p);
                    cc = cc + 1;
                    tt = tt + pp;
                });

                _cB.html(cc);
                _tB.html(tt);
            } else {
                _list.attr('checked', null);
                _cB.html('0');
                _tB.html('0');
            }
        });

        $('input[name="carStatistic"]').click(function(){
            var _tis = $(this);
            var _pDiv = _tis.parents('div.vehicle-4');

            var _p = _pDiv.find('td.td-v3').html();
            if(_p) {
                if(_p.indexOf('.') > -1) {
                    _p = _p.substring(0, _p.indexOf('.'));
                }
                if(_p.indexOf('元') > -1) {
                    _p = _p.substring(0, _p.indexOf('元'));
                }
            }
            var _check = _tis.attr('checked');

            var _divClass = _pDiv.attr('class');
            var _time = _divClass.substring(14);

            var _cB = $('div#time' + _time).find('td.total_c b');
            var _tB = $('div#time' + _time).find('td.total_m b');
            var _c = _cB.html();
            var _t = _tB.html();
            var cc = parseInt(_c);
            var tt = parseInt(_t);
            var pp = parseInt(_p);

            if(_check == 'checked') {//选中
                cc = cc + 1;
                tt = tt + pp;
            } else {//不选中
                if(tt >= pp) {
                    cc = cc - 1;
                    tt = tt - pp;
                }
            }
            _cB.html(cc);
            _tB.html(tt);
        });



        $('#query').change(function(){
            var selectedVal = $("#query").find("option:selected").val();
            doQueryHour(selectedVal);
        });

        $('#_report').click(function() {
            var _selected = $('input[name="carStatistic"]:checked');
            if(_selected.length < 1) {
                layer.msg('请至少选择一条缴费记录用于生成报告!',{shadeClose:true,shade:0.1,time:2000});
                return;
            }


            layer.confirm('是否确定上交报告？',{
                icon: 3,
                title:'上交报告'
            },function(sure){
                layer.closeAll();

                var selectedChargesIds = '';
                _selected.each(function() {
                    var _tis = $(this);
                    var _clazz = _tis.attr('class');
                    var _sid = _clazz.substring(9); //'input3-1 '
                    selectedChargesIds += _sid + ',';
                });

                if(selectedChargesIds.indexOf(',') > -1) {
                    selectedChargesIds = selectedChargesIds.substring(0, selectedChargesIds.length -1);
                }
                $('input[name="selectedChargesIds"]').val(selectedChargesIds);

                var frm = document.forms['queryFrm'];
                //生成报告
                var url = '/wape-web/api/core/centerService?serviceCode=MMZS123&queryType=3';

                var queryFlag = $('input[name="query1"]').attr('checked');
                if(queryFlag == 'checked') {
                    url += '&queryFlag=1';
                }


                var selectedVal = $("#query").find("option:selected").val();
                url += '&queryHour=' + selectedVal;
                frm.action = url;
                frm.submit();
            });
        })
    });

    function doQuery(flag) {
        var frm = document.forms['queryFrm'];
        var url = '/wape-web/api/core/centerService?serviceCode=MMZS122';

        var queryFlag = $('input[name="query1"]').attr('checked');
        if(queryFlag == 'checked') {
            url += '&queryFlag=1';
        }


        var selectedVal = $("#query").find("option:selected").val();
        url += '&queryHour=' + selectedVal;
        frm.action = url;
        frm.submit();
    }
    function doQueryHour(flag) {
        var frm = document.forms['queryFrm'];
        var url = '/wape-web/api/core/centerService?serviceCode=MMZS122';

        var queryFlag = $('input[name="query1"]').attr('checked');
        if(queryFlag == 'checked') {
            url += '&queryFlag=1';
        }

        url += '&queryHour=' + flag;
        frm.action = url;
        frm.submit();
    }
</script>
</body>
</html>


